<template>
  <view class="fix-top-window">
    <view class="uni-header">
      <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
      <view class="uni-group">
        <uni-easyinput type="text" v-model="query.name" :placeholder="$t('common.placeholder.query')" />
        <button class="uni-button hide-on-phone" type="default" size="mini" @click="getData(1)">{{$t('common.button.search')}}</button>
        <button class="uni-button" type="primary" size="mini" @click="navigateTo('./edit')"
        v-if="uniIDHasPermission('wda')">
          {{$t('common.button.add')}}
        </button>
        <button class="uni-button" size="mini" type="warn" v-if="uniIDHasPermission('wdd')" 
		:disabled="!tableData.selectedIndexArray.length" @click="removeDataByIds()">{{ $t('common.button.batchDelete') }}</button>
      </view>
    </view>
    <view class="uni-container">
      <uni-table ref="tableRef" :emptyText="$t('common.empty')" border stripe
        type="selection" @selection-change="selectionChange">
        <uni-tr>
          <uni-th align="center" filter-type="search"
            @filter-change="filterChange($event, 'type')">字典标识</uni-th>
		  <uni-th align="center">字典名称</uni-th>
          <uni-th align="center" width="100">选项数量</uni-th>
          <uni-th align="center" filter-type="select" :filter-data="statusOptions"
            @filter-change="filterChange($event, 'status')">状态</uni-th>
          <uni-th align="center" sortable @sort-change="sortChange($event, 'sort')">排序</uni-th>
          <uni-th align="center" filter-type="timestamp" sortable
            @filter-change="filterChange($event, 'create_time')">创建时间</uni-th>
          <uni-th align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item,index) in tableData.list" :key="index">
          <uni-td align="center">{{item.type}}</uni-td>
		  <uni-td align="center">{{item.name}}</uni-td>
          <uni-td align="center">{{item.options ? item.options.length : 0}}</uni-td>
          <uni-td align="center">
            <switch v-if="uniIDHasPermission('wde')" :checked='item.status' style="transform:scale(0.7)" @change="toggleFieldChange(item._id, 'status')"/>
            <uni-tag v-else inverted="true" :text="item.status? '启用':'禁用'" :type="item.status?'success':'error'" />
          </uni-td>
          <uni-td align="center">{{item.sort}}</uni-td>
          <uni-td align="center"><uni-dateformat :date="item.create_time" format="yyyy-MM-dd"></uni-dateformat></uni-td>
          <uni-td align="center">
            <view class="uni-group">
              <button class="uni-button" size="mini" type="primary" 
                v-if="uniIDHasPermission('wde')" @click="navigateTo('./edit?id='+item._id, false)">
                {{ $t('common.button.edit') }}
              </button>
              <button class="uni-button" size="mini" type="primary" 
                v-if="uniIDHasPermission('wde')" @click="navigateTo('./options?id='+item._id+'&type='+item.type, false)">
                选项管理
              </button>
              <button class="uni-button" size="mini" type="warn" 
                v-if="uniIDHasPermission('wdd')" @click="removeDataByIds([item._id])">
                {{ $t('common.button.delete') }}
              </button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <view class="uni-pagination-box">
        <uni-pagination show-icon show-page-size :page-size="query.pageSize" v-model="query.page"
          :total="tableData.total" @change="onPageChange" @pageSizeChange="changeSize" />
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { useTableSearch } from '@/utils/composable.js'
  import { formatDateTime } from '@/utils/common.js'
  const tableRef = ref(null)
  const wallpaperObj = uniCloud.importObject('iss-wallpaper')
  
  // 状态选项
  const statusOptions = ref([
    { text: '启用', value: true },
    { text: '禁用', value: false }
  ])
  
  // 使用通用表格搜索逻辑
  const {
    query, // 查询条件 ref对象
    tableData, // 列表数据集合 ref对象
    getData, // 获取列表数据 method
    removeDataByIds, // 根据选择删除记录
    toggleFieldChange, // 列表中某条记录状态变化事件 method
    selectionChange, // 列表选中记录变化 method
    onPageChange, // table当前页变化事件 method
    changeSize, // table每页显示条数变化事件 method
    filterChange, // table 某列筛选条件变化
    sortChange, // table 某列排序变化
    navigateTo // 调整页面，并建立返回刷新数据的通信机制
  } = useTableSearch({
    title: '数据字典',
    tableRef,
    searchform: {
      type: '',
      status: undefined,
      create_time: []
    },
    getList: wallpaperObj.getList_dict,
    columnToggle: wallpaperObj.toggleStatus_dict,
    remove: wallpaperObj.remove_dict
  })
</script>

<style scoped lang="scss">
.uni-tag {
  display: inline-block;
}

/* 解决 uni-app uni-table 横向滚动条导致左侧边框高度异常问题 */
::v-deep .table--border {
  border: none;
}

::v-deep .uni-table {
  border: 1px solid #ebeef5;
  border-right: none;
  border-bottom: none;
}

::v-deep .uni-table-th, 
::v-deep .uni-table-td {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
</style>